<template>
      	<page-meta :root-font-size="fontSizeStore.currentFontSizeRpx"></page-meta>
  <view class="alarm-detail-page">
    <!-- 顶部导航栏 -->
 

    <!-- 详情内容卡片 -->
    <view class="detail-card">
      <!-- 状态与标题区 -->
      <view class="card-header">
        <view class="status-tag text11" :class="alarmDetail.status">
          {{ getStatusText(alarmDetail.status) }}
        </view>
        <text class="detail-title text11">{{ alarmDetail.alertType }}</text>
      </view>

      <!-- 基础信息区（时间/位置/设备） -->
      <view class="info-section ">

        <view class="info-item text10">
          <text class="info-label">发生时间：</text>
          <text class="info-value">{{ alarmDetail.time }}</text>
        </view>
        <view class="info-item text10">
          <text class="info-label">设备名称：</text>
          <text class="info-value">{{ alarmDetail.deviceName}}</text>
        </view>
        <!-- <view class="info-item">
          <text class="info-label">告警类型：</text>
          <text class="info-value">{{ formatTime(alarmDetail.time) }}</text>
        </view> -->

          <view class="info-item text10">
          <text class="info-label">当前数值：</text>
          <text class="info-value">{{ alarmDetail.currentValue }}</text>
        </view>

   <view class="info-item text10">
          <text class="info-label">正常范围：</text>
          <text class="info-value">{{ alarmDetail.normalRange }}</text>
        </view>
        
        <view class="info-item text10">
          <text class="info-label">设备位置：</text>
          <text class="info-value">{{ alarmDetail.location}}</text>
        </view>
        <view class="info-item text10">
          <text class="info-label">设备编号：</text>
          <text class="info-value">{{ alarmDetail.number }}</text>
        </view>
           <view class="info-item text10">
          <text class="info-label">联系方式：</text>
          <text class="info-value">{{ alarmDetail.phone }}</text>
        </view>
      </view>

     

      <!-- 处理记录区（历史操作） -->
      <view class="record-section">
        <text class="section-title text11">处理记录</text>
        <view class="record-list">
          <view class="record-item " v-for="record in alarmDetail.handleItems" :key="record.id">
            <view class="record-header ">
              <text class="record-time text10">{{ record.time }}</text>
              <text class="record-operator text10">操作人：{{ record.person }}</text>
            </view>
            <text class="record-action text10">操作：{{ record.operator_desc }}</text>
            <text class="record-remark text10" v-if="record.remarks">备注：{{ record.remarks }}</text>
          </view>
          <view class="no-record" v-if="alarmDetail.records?.length === 0">
            暂无处理记录
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 静态组件，无额外逻辑

import {
  ref,
  onMounted,
  computed,
  nextTick
} from 'vue';
import {
  useRouter
} from 'uni-mini-router'

import {
  useFontSizeStore
} from '@/stores/fontSizeStore';
import {
  useTabStore
} from '@/stores/tabs'
import {
  ROLE_TABS
} from "@/config/roles"

import { familyMembers_alarmListDetailApi } from "@/api/familyMembers"
import TabComponent from '@/components/tab-bar/index.vue'
const fontSizeStore = useFontSizeStore();
const tabStore = useTabStore()
const router = useRouter();

// ✅ 计算当前角色的 tabs
const currentTabs = computed(() => {
  const role = tabStore.getUserRole
  return ROLE_TABS[role]?.tabs || ROLE_TABS['default']?.tabs || []
})

// ✅ Tab 点击处理
const onTabChange = (tab) => {
  nextTick(() => {
    router.pushTab({
      name: tab.key
    })
  })
}



import { onLoad } from '@dcloudio/uni-app'


// 响应式变量
const alarmDetail = ref({})

// 页面加载时获取数据
onLoad((options) => {
  const alarmId = options.id
  // fetchAlarmDetail(alarmId)

  familyMembers_alarmListDetailApi({ id: alarmId||"1" }).then((res) => {
    if (res.code == 200) {
      console.log("re:", res);
      // alertCardList.value=res.data
      alarmDetail.value = res.data
    }
  })

})


// 状态文本映射
const getStatusText = (status) => {
  const map = { emergency: '紧急', important: '重要', normal: '一般' };
  return map[status] || '未知';
}

// 时间格式化（转换为 YYYY-MM-DD HH:mm）
const formatTime = (timestamp) => {
  if (!timestamp) return ''
  return new Date(timestamp).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  }).replace(/\//g, '-');
}


</script>

<style lang="less" scoped>
.alarm-detail-page {
  height: 100vh;
  background-color: #f5f7fa;
  padding: 32rpx 24rpx;

  // 顶部导航栏
  .detail-navbar {
    display: flex;
    align-items: center;
    height: 88rpx;
    padding: 0 16rpx;
    margin-bottom: 24rpx;

    .navbar-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      flex: 1;
      text-align: center;
    }
  }

  // 详情卡片
  .detail-card {
    background: #fff;
    border-radius: 16rpx;
    padding: 32rpx 24rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);

    // 状态与标题区
    .card-header {
      display: flex;
      align-items: center;
      margin-bottom: 24rpx;

      .status-tag {
        padding: 4rpx 12rpx;
        border-radius: 8rpx;
        font-size: 24rpx;
        font-weight: 500;
        min-width: 80rpx;
        text-align: center;
        margin-right: 20rpx;

        &.emergency {
          background: #ffebee;
          color: #f44336;
        }

        &.important {
          background: #fff3e0;
          color: #ff9800;
        }

        &.normal {
          background: #e3f2fd;
          color: #2196f3;
        }
      }

      .detail-title {
        font-size: 36rpx;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
      }
    }

    // 基础信息区
    .info-section {
      background: #f9f9f9;
      border-radius: 12rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;

      .info-item {
        display: flex;
        margin-bottom: 16rpx;
        font-size: 28rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .info-label {
          color: #666;
          min-width: 160rpx;
        }

        .info-value {
          color: #333;
          flex: 1;
        }
      }
    }

    // 告警参数区
    .param-section {
      margin-bottom: 24rpx;

      .section-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 24rpx;
        display: block;
      }

      .param-item {
        display: flex;
        margin-bottom: 16rpx;
        font-size: 28rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .param-label {
          color: #666;
          min-width: 160rpx;
        }

        .param-value {
          color: #333;
          flex: 1;

          &.highlight {
            color: #f44336;
            font-weight: 500;
          }
        }
      }
    }

    // 处理记录区
    .record-section {
      .section-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #333;
        margin-bottom: 24rpx;
        display: block;
      }

      .record-list {
        .record-item {
          background: #f9f9f9;
          border-radius: 12rpx;
          padding: 24rpx;
          margin-bottom: 16rpx;

          .record-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8rpx;

            .record-time {
              color: #999;
              font-size: 26rpx;
            }

            .record-operator {
              color: #333;
              font-size: 26rpx;
            }
          }

          .record-action {
            color: #1890ff;
            font-weight: 500;
            font-size: 28rpx;
            margin-bottom: 8rpx;
            display: block;
          }

          .record-remark {
            color: #666;
            font-size: 26rpx;
            display: block;
          }
        }

        .no-record {
          background: #f9f9f9;
          border-radius: 12rpx;
          padding: 24rpx;
          color: #999;
          font-size: 28rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>
